﻿@{
    ViewData["Title"] = "我的课程";
}

@section Styles{
    <!-- Plugin css -->
    <link href="~/assets/libs/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />

    <style>


        .fc-list-table .bg-primary {
            background-color: unset !important;
        }

        .hidebtn {
            display: none;
        }

        .chaptersection {
            font-weight: normal;
            font-size: 15px;
            margin-left: 5px;
        }
    </style>
}


<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">我的课程</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">我的课程</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-body">
                    <div class="row">


                        <div class="col-lg-12">
                            <div id="calendar"></div>
                        </div> <!-- end col -->

                    </div>  <!-- end row -->
                </div> <!-- end card body-->
            </div> <!-- end card -->
            <!-- Add New Event MODAL -->
            <div class="modal fade" id="event-modal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">课时信息</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body pr-3 pl-3 pt-1">

                        </div>
                        <div class="text-right pl-3 pr-3 pb-3">
                            <button type="button" class="btn btn-light " data-dismiss="modal">关闭</button>
                            <button type="button" id="joinBtn" class="btn btn-primary hidebtn save-event">进入教室</button>
                            <button type="button" id="previewBtn" class="btn btn-primary hidebtn save-event">浏览教材</button>
                            <button type="button" id="reviewBtn" class="btn btn-primary hidebtn save-event">回看录像</button>
                        </div>
                    </div> <!-- end modal-content-->
                </div> <!-- end modal dialog-->
            </div>
            <!-- end modal-->

        </div>
        <!-- end col-12 -->
    </div> <!-- end row -->

</div> <!-- container -->
<!-- Content Header (Page header) -->


@section scripts{
    <script src="~/assets/libs/moment/moment.min.js"></script>
    <script src="~/assets/libs/fullcalendar/fullcalendar.min.js"></script>
    <script src="~/assets/libs/fullcalendar/zh-cn.js"></script>
    <script src="~/assets/libs/microsoft/signalr/dist/browser/signalr.min.js"></script>

    <script>

        var connection = new signalR.HubConnectionBuilder().withUrl("/updateClassRoomStatus").build();

        connection.on("ReceiveMessage", function (meetingno, status) {

            if (meetingno == $("#meetingno").val()) {

                if (status == 0) {

                    $("#previewBtn").removeClass("hidebtn");
                    $("#joinBtn").removeClass("hidebtn").addClass("hidebtn");
                    $("#reviewBtn").removeClass("hidebtn").addClass("hidebtn");

                    $("#statustxt").text("未开始");

                } else if (status == 1) {

                    $("#joinBtn").removeClass("hidebtn");
                    $("#previewBtn").removeClass("hidebtn").addClass("hidebtn");
                    $("#reviewBtn").removeClass("hidebtn").addClass("hidebtn");
                    $("#statustxt").text("上课中");


                } else {

                    $("#reviewBtn").removeClass("hidebtn");
                    $("#joinBtn").removeClass("hidebtn").addClass("hidebtn");
                    $("#previewBtn").removeClass("hidebtn").addClass("hidebtn");
                    $("#statustxt").text("已结束");
                }
            }

        });

        connection.start().then(function () {

        }).catch(function (err) {
            return console.error(err.toString());
        });


        $(function () {

            $("#calendar").fullCalendar({
                header: {
                    left: "prev,next today",
                    center: "title",
                    right: "month,agendaWeek,agendaDay,listMonth"
                },
                defaultDate: moment(new Date()),
                locale: 'zh-cn',
                slotDuration: "00:15:00",
                minTime: "06:00:00",
                maxTime: "24:00:00",
                defaultView: "month",
                weekMode: 'liquid',
                timeFormat: 'HH:mm',
                handleWindowResize: true,
                height: $(window).height() - 200,
                events: getEvents,
                editable: true,
                droppable: false,
                eventLimit: false,
                selectable: true,
                select: function (e, t, n) {
                    // onSelect(e, t, n)
                },
                eventClick: function (e, t, n) {
                    onEventClick(e, t, n)
                }
            });



            $('#event-modal').on('hidden.bs.modal', function () {
                $(".modal-body").html('');
            })

            $("#joinBtn").click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/TeachingPlan/BuildJoinMeetingParams',
                    data: 'meetingno=' + $("#meetingno").val(),
                    success: function (data) {

                        console.log(data);

                        if (data.success) {
                            $("#event-modal").modal('hide');
                            window.open(data.url);
                        }
                        else {
                            ShowMessageError(data.message);
                        }

                    }
                });
            });

            $("#previewBtn").click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/TeachingPlan/GetMaterialURLs',
                    data: 'meetingno=' + $("#meetingno").val(),
                    success: function (data) {

                        if (data.success) {
                            window.open(data.url, "_blank");
                            //window.location.href = data.url;
                        } else {
                            Swal.fire({
                                title: "添加课件",
                                text: "未添加课件,是否添加课件?",
                                type: "warning",
                                showCancelButton: true,
                                confirmButtonColor: "#dd4b39",
                                confirmButtonText: "是的，添加!",
                                cancelButtonText: "取消",

                            }).then(function (willdelete) {
                                if (!willdelete.value) return;
                                // 跳转到添加课件页面
                                window.open("/Course/Edit/" + data.id, "_blank");
                            });
                        }

                    }
                });
            });



        });
        function onEventClick(t, e, n) {

            console.log(t);

            $.ajax({
                type: 'POST',
                url: '/TeachingPlan/GetTeachingPlanItem',
                data: 'id=' + t.id + '&adhoc=' + t.adhoc,
                //contentType: 'application/json',
                success: function (data) {

                    $(".modal-body").html(data);

                    if ($("#meetingno").val()) {

                        $.ajax({
                            type: 'POST',
                            url: '/TeachingPlan/CheckMeetingStatus',
                            data: 'meetingno=' + $("#meetingno").val(),
                            success: function (data) {

                                if (data.success) {

                                    if (data.status == 0) {

                                        $("#previewBtn").removeClass("hidebtn");
                                        $("#joinBtn").removeClass("hidebtn").addClass("hidebtn");
                                        $("#reviewBtn").removeClass("hidebtn").addClass("hidebtn");

                                        $("#statustxt").text("未开始");

                                    } else if (data.status == 1) {

                                        $("#joinBtn").removeClass("hidebtn");
                                        $("#previewBtn").removeClass("hidebtn").addClass("hidebtn");
                                        $("#reviewBtn").removeClass("hidebtn").addClass("hidebtn");
                                        $("#statustxt").text("上课中");


                                    } else {

                                        $("#reviewBtn").removeClass("hidebtn");
                                        $("#joinBtn").removeClass("hidebtn").addClass("hidebtn");
                                        $("#previewBtn").removeClass("hidebtn").addClass("hidebtn");
                                        $("#statustxt").text("已结束");
                                    }



                                }

                            }
                        });
                    }

                }
            });
            $("#event-modal").modal({
                backdrop: "static"
            });


            //$("#event-modal").find("form").on("submit", function () {
            //    return t.title = l.find("input[type=text]").val(),
            //        $("#calendar").fullCalendar("updateEvent", t),
            //        $("#event-modal").modal("hide"),
            //        !1;
            //});
        };

        function onSelect(n, a, e) {
            var l = this;
            l.$modal.modal({
                backdrop: "static"
            });
            var i = $("<form></form>");

            i.append("<div class='row'></div>");

            i.find(".row").append("<div class='col-12'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
                .append("<div class='col-12'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
                .find("select[name='category']")
                .append("<option value='bg-danger'>Danger</option>").append("<option value='bg-success'>Success</option>")
                .append("<option value='bg-primary'>Primary</option>").append("<option value='bg-info'>Info</option>")
                .append("<option value='bg-dark'>Dark</option>").append("<option value='bg-warning'>Warning</option></div></div>");

            l.$modal.find(".delete-event").hide().end().find(".save-event").show().end().find(".modal-body").empty().prepend(i).end().find(".save-event").unbind("click").click(function () {
                i.submit()
            });

            l.$modal.find("form").on("submit", function () {
                var e = i.find("input[name='title']").val()
                    , t = (i.find("input[name='beginning']").val(),
                        i.find("input[name='ending']").val(),
                        i.find("select[name='category'] option:checked").val());
                return null !== e && 0 != e.length ? (l.$calendarObj.fullCalendar("renderEvent", {
                    title: e,
                    start: n,
                    end: a,
                    allDay: !1,
                    className: t
                }, !0),
                    l.$modal.modal("hide")) : alert("You have to give a title to your event"),
                    !1
            });
            $("#calendar").fullCalendar("unselect");
        }

        function getEvents(start, end, timezone, callback) {

            $.ajax({
                type: 'POST',
                url: '/TeachingPlan/GetMyTeachingPlan',
                data: { startdate: start._d, enddate: end._d },
                contentType: 'application/json',
                success: function (data) {
                    if (data.success) {
                        let events = []
                        data.data.forEach(function (item) {
                            events.push({
                                id: item.Id,
                                title: item.Title,
                                adhoc: item.AdhocPlan,
                                start: window.moment(item.Start).format("YYYY-MM-DD HH:mm"),
                                end: window.moment(item.End).format("YYYY-MM-DD HH:mm"),
                                className: "bg-primary"
                            })

                        });
                        callback(events);
                    }
                    else {
                        ShowMessageError(data.message);
                    }
                }
            });



        }


    </script>
}



